<template>
  <transition name="move">
    <div class="pro-des">
      <div class="pro-des active">
        <div class="pro-base">
          <ul class="clearfix pro-base-wrap">
            <li class="item">
              <span class="title">药剂功能</span>
              <span class="text">
                        治疗感冒
                    </span>
            </li>

            <li class="item">
              <span class="title">药剂功能</span>
              <span class="text">
                        治疗感冒
                    </span>
            </li>

            <li class="item">
              <span class="title">药剂功能</span>
              <span class="text">
                        治疗感冒
                    </span>
            </li>

            <li class="item">
              <span class="title">药剂功能</span>
              <span class="text">
                        治疗感冒
                    </span>
            </li>
          </ul>
        </div>

        <div class="section describe">
          <div class="title">
            <i class="bg-line bg-line-l"></i>
            <span class="text">
                        商品描述
                    </span>
            <i class="bg-line bg-line-r"></i>
          </div>

          <div class="describe-con">
            <p class="text">采用一体织材质，如第二层肌肤般贴合足部，舒适透气。EVA结合橡胶，采用一体织材质，如第二层肌肤般贴合足部，舒适透气。EVA结合橡胶</p>
            <p class="text">采用一体织材质，如第二层肌肤般贴合足部，舒适透气。EVA结合橡胶，采用一体织材质，如第二层肌肤般贴合足部，舒适透气。EVA结合橡胶</p>
          </div>
        </div>

        <div class="section pro-show">
          <div class="title">
            <i class="bg-line bg-line-l"></i>
            <span class="text">
                        产品展示
                    </span>
            <i class="bg-line bg-line-r"></i>
          </div>

          <div class="pro-show-con">
            <img src="/static/images/dot.jpg" alt="..." />
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">

  export default {
    components: {

    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .pro-des
    min-height: 500px
    .pro-base
      ul.pro-base-wrap
        padding: 40px 20px 20px
        background-color: #f7f7f7
        border: 1px solid #c8c8c8
        border-top: none
        font-size: 0
        li.item
          display: inline-block
          width: 50%
          font-size: $font-small
          line-height: 18px
          span.title
            display: inline-block
            width: 85px
            color: #666
          span.text
            color: #888
    .describe
      .describe-con
        margin-top: 20px
    .pro-show
      display: block

  .section
    margin-top: 30px
    padding-bottom: 100px
    .title
      position: relative
      wh(100%, 36px)
      span.text
        display: block
        width: 150px
        hh(36px)
        margin: 0 auto
        sc($font-medium-x, $white)
        text-align: center
        background-color: $vice-color
      i.bg-line
        position: absolute
        top: 0
        wh(405px, 36px)
        &.bg-line-l
          left: 0
          background: url("./bg-line-l.jpg") no-repeat
        &.bg-line-r
          right: 0
          background: url("./bg-line-r.jpg") no-repeat


  .move-enter-active, .move-leave-active
    transiti(transform, .5s, ease)
  .move-enter
    -webkit-transform: translate3d(-100%, 0, 0)
    -moz-transform: translate3d(-100%, 0, 0)
    -ms-transform: translate3d(-100%, 0, 0)
    -o-transform: translate3d(-100%, 0, 0)
    transform: translate3d(-100%, 0, 0)
  .move-leave
    -webkit-transform: translate3d(100%, 0, 0)
    -moz-transform: translate3d(100%, 0, 0)
    -ms-transform: translate3d(100%, 0, 0)
    -o-transform: translate3d(100%, 0, 0)
    transform: translate3d(100%, 0, 0)
</style>